<template>
	<div class="zco-get-geo-location-response-container">
		<p>{{ getLocationStatus }}</p>
		<p>{{ getLocationResult }}</p>
	</div>
</template>
<script>
export default {
	name: 'GetGeoLocation-Response',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		},
		location: {
			type: String,
			default: () => ''
		},
		reason: {
			type: String,
			default: () => ''
		},
	},
	computed: {
		getLocationStatus() {
			return `致 <${this.toUserRole === 'agent' ? '坐席' : '访客'}${this.toUserName}>，${this.status === 'done' ? '获取成功' : '获取失败'}`;
		},
		getLocationResult() {
			console.log('getLocationResult', this.status, this.location, this.reason);
			if (this.status === 'done' && this.location) {
				return `地理位置：${this.location}`;
			} else if (this.status === 'rejected') {
				return '原因：访客拒绝';
			} else if (this.status === 'failed') {
				return this.reason ? `原因：${this.reason}` : '原因：请求超时';
			} else if (this.reason === 'timeout') {
				return '原因：访客提交超时';
			} else {
				return this.reason ? this.reason : '';
			}
		}
	},
	data() {
		return {};
	},
	methods: {},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-get-geo-location-response-container p {
	margin: 0;
}
</style>
